<template>
	<view class="carbon-footprint">
		<view class="top">
			<view class="title">
				碳固存月趋势&nbsp;&nbsp;
			</view>
			<view class="switch">
				<view class="iconfont icon-xiangzuo fx" @click="upd(-1)"></view>
				<view class="iconfont icon-xiangyou fx" @click="upd(1)"></view>
			</view>
		</view>

		<!-- <NullData v-show="monthRecord.length==0"></NullData> -->
		
		<view class="content">
			<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec">
			</uni-ec-canvas>
		</view>
	</view>
</template>

<script>
	import NullData from '@/common/NullData/NullData'
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts'
	
	import { getMonthRecord as getMonthRecordApi } from '@/api/info'

	export default {
		data() {
			return {
				date: '',
				monthRecord: [],
				cid: 0,
				year: "2023",
				month: "4",
				max: 0,
				maxY: 0,
				maxM: 0,
				ec: {
					lazyLoad: true,
					option: {
						 title: {
							subtext: "2023年4月碳固存趋势",
							// fontSize: 40,
							left: 'center',// 距离左边位置
							top: 0,// 距离上面位置
							subtextStyle:{ // 设置二级标题的样式
								color:"#fff",
								fontSize: 16,
								fontWeight: '400',
							}
						 },

						dataZoom: [
							{ //Y轴固定,让内容滚动
								type: 'slider',
								show: false,
								xAxisIndex: [0],
								start: 1,
								end: 20,//设置X轴刻度之间的间隔(根据数据量来调整)
								zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
							},
							{
								type: 'inside',
								xAxisIndex: [0],
								start: 1,
								end: 20,
								zoomLock: true, //锁定区域禁止缩放
							
							},
						],
						xAxis: {
							type: 'category',
							data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
							splitLine: {
							  show: false
							},
							// interval: 2,
							axisLine: { //x轴线的颜色以及宽度
								// show: true,
								lineStyle: {
									color: "#fff",
									width: 0,
									type: "solid"
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {//x轴文字的配置
								show: true,
								interval: 'auto',
								textStyle: {
									color: "#fff",
								}
							},
						},
						yAxis: {
							type: 'value',
							name: "kgCO₂e     ",
							color: '#fff',
							scale : true,
							max : 'dataMax',
							min : 0,
							splitNumber: 4,
							splitLine: {
							  show: false
							},
							
							axisTick: {
								show: false
							},
							// max : 200,
							// min : 0,
							axisLine: { //y轴线的颜色以及宽度
								show: false, //数值坐标轴是否显示
								lineStyle: {
									color: "#fff",
									width: 0,
									type: "solid"
								}
							},
							
							axisLabel: {//y轴文字的配置
								show: true,
								textStyle: {
									color: "#fff",
								}
							},
						},
						series: [
							{
								data: [150, 230, 224, 218, 135, 147, 260],
								color: ['#25eaff'],
								type: 'line',
								smooth: 0.5, // 设置弧度 属性值在0-1之间
								label: {
									show: true,
									position: 'top',
									textStyle: { // 数值样式
										color: '#fff',
										// fontSize: 16
									},
								},
								areaStyle: { // 区域填充样式
								      color: { 
								        type: 'linear',
								        x: 0,
								        y: 0,
								        x2: 0,
								        y2: 1,
								        colorStops: [
								          {
								            offset: 0,
								            color: '#25eaff', // 0% 处的颜色
								          },
								          {
								            offset: 1,
								            color: '#354969' // 100% 处的颜色
								          }
								        ],
								        global: false, // 缺省为 false
								      }
								    },
								
							}
						]
					}
				}

			}
		},
		onReady() {
			setTimeout(() => {
				// console.log('666')
				this.$refs['canvas'].init()
				this.date=this.currentTime()
				this.cid=this.$store.getters.getUser.cid
				this.__getMonthRecord()
				
				
				// console.log('666')
			}, 1000) // 两秒之后延迟加载  

			setTimeout(() => {

			}, 2000)
		},
		created() {
			this.cid=this.$store.getters.getUser.cid
		},
		methods: {
			upd(val){
				let mon = Number(this.month) + val;
				let yea = Number(this.year);
				
				if (mon > 12) mon = 1, yea ++;
				if (mon < 1) mon = 12, yea --;
				
				if(!(yea >= this.maxY && mon>this.maxM)) {
					this.month = mon+"";
					// if (this.month.length === 1) this.month = ' ' + this.month;
					this.year = yea+"";
					// console.log(this.month, this.year);
					this.__getMonthRecord()
					this.ec.option.title.subtext=this.year+"年"+this.month+"月碳固存趋势"
				}
				
				
				// this.__getMonthRecord()	
			},
			currentTime() {
				var date = new Date();
				let year = date.getFullYear(); //月份从0~11，所以加一
				let month = date.getMonth()+1;
				let day = date.getDate();
				this.maxY = year;
				this.maxM = month;
				this.ec.option.title.subtext=this.year+"年"+this.month+"月碳固存趋势"
				// console.log(year, month, day)
				// return year+"-"+(month<10 ? "0"+month : month)
				return year+"-"+month
			},
			dateUnit(index) {
				this.dateIndex = index
				// console.log(index)
			},
			async __getMonthRecord() {
				this.ec.option.title.subtext=this.year+"年"+this.month+"月碳固存趋势"
				const data={
					cid: this.cid,
					year: this.year,
					month: this.month,
					type: 1,
				}
				
				const res=await getMonthRecordApi(data)
				if(res.status == this.API_STATUS_CODE.SUCCESS) {
					this.monthRecord=res.data
					let x=[];
					let y=[];
					let t=0;
					for(let i=1; i<=this.monthRecord[0]; i++) {
						// if(!!this.monthRecord[i]) {
						// 	x.push(i+'号')
						// 	y.push(!!this.monthRecord[i] ? this.monthRecord[i] : ' ')
						// 	if(this.monthRecord[i] > t) {
						// 		t=this.monthRecord[i]
						// 	}
						// }
						x.push(i+'号')
						y.push(!!this.monthRecord[i] ? this.monthRecord[i] : ' ')
						// console.log(i,this.monthRecord[i])
					}
					console.log(t)
					// this.ec.option.yAxis.max=t
					this.ec.option.xAxis.data = x
					this.ec.option.series[0].data = y
					
				}else {
					uni.showToast({
						icon: 'error',
						title: '接口调用失败',
						duration: 3000
					})
					console.log('4')
				}
				// console.log('res: ', res.data)

				// this.ec.option.xAxis.data = x
				// this.ec.option.series[0].data = y
				// console.log('x: ',this.ec.option.xAxis.data)
				// console.log('y: ',this.ec.option.series[0].data)

			}
		},
		components: {
			NullData,
			uniEcCanvas
		}
	}
</script>

<style lang="less" scoped>
	.carbon-footprint {
		width: 100%;
		margin-top: 30rpx;
		padding: 30rpx;
		padding-top: 12rpx;
		box-sizing: border-box;
		border-radius: 25rpx;
		background-color: rgba(255, 255, 255, .1);

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;


			.title {
				color: #fff;
				margin-right: 10rpx;
				font-size: 35rpx;

				view {
					display: inline-block;
				}
			}

			.switch {
				display: flex;
				align-items: center;

				.fx {
					font-size: 70rpx;
					color: #fff;
				}
			}
		}

		.content {
			width: 100%;
			height: 450rpx;
			text-align: center;
		}
	}
</style>
